<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>父向子通讯，依赖子组件中的props属性</title>

</head>
<body>

    <div id="app">

        <heima :age="28" :edit="true" :user="user"></heima>
    </div>


<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    //局部组件在声明时并不知道自己是个组件,注册完成之后才知道
    var heima = {
        template:`
            <div>
                我是一个组件我的名字来源于父组件，年龄:{{age}},
                当前状态为：{{edit?"修改":"新增"}}<br/>
                {{user.id}}---{{user.name}}
</div>
        `,
       props:{
           age:{
               type:Number,
               default:14
           },
           edit:{
               type: Boolean,
               default: false
           },
           user:{
               type:Object,
               default:{}
           }
       }
    }

    //局部组件使用时必须进行注册
    var app = new Vue({
        el: "#app",
        components:{
            heima
        },
        data:{
            user:{
                id:100086,
                name:"abc"
            }
        }
    });
</script>


</body>
</html>